<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width:600px;
        }
        .collapse{
            border-collapse: collapse;
        }
        td{
            border: 1px solid;
            text-align: center;
        }
    </style>
</head>
<body>
    
    <script>
        let students=[
            {
                "sid":"s01",
                "name":"张三",
                age:15,
                addr:"南京",
                oper:""
            },
            {
                "sid":"s02",
                "name":"李四",
                age:26,
                addr:"南京",
                oper:""
            },
            {
                "sid":"s03",
                "name":"王五",
                age:45,
                addr:"南京",
                oper:""
            }
        ];
        


        let myTable ; 
        let myThead ;
        let myTbody ; 
        let btnAdd ; 


        function initTable(){
            myTable = document.createElement("table");
            document.body.append(myTable);
            myTable.className="collapse"
            myThead = document.createElement("thead");
            myTbody = document.createElement("tbody");
            myTable.append(myThead)
            myTable.append(myTbody)

            btnAdd= document.createElement("button");
            btnAdd.type = "button";
            btnAdd.innerHTML="新增";

            btnAdd.addEventListener('click',function(){
                let sid = prompt("请输入学生编号:");
                if(!sid)return;
                let sname = prompt("请输入学生姓名:");
                if (!sname)return;;
                let age = prompt("请输入年龄:");
                if(!age)return;;
                let addr = prompt("请输入地址:");
                if(!addr)return;;
                //可以添加验证（数据不重复）
                let stu = {
                    sid:sid,
                    name:sname,
                    age:age,
                    addr:addr,
                    oper:""
                }
                students.push(stu);
                myTbody.innerHTML = "";
                initMyTbody();


            })
            document.body.append(btnAdd);
        }
        
        //初始化表头的
        function initMyThead(){
            const columnNames = ["编号","姓名","年龄","地址","数据操作"];
            let tr = myThead.insertRow();
            for(let i = 0 ;i<columnNames.length;i++) {
                 let td = tr.insertCell();
                 td.innerHTML = columnNames[i];
            }
        }

        function initMyTbody(){
            //生成骨架
            for(let i = 0;i<students.length;i++) {
                let tr = myTbody.insertRow();
                let stu = students[i];
                for(const key in stu) {
                   let td = tr.insertCell();
                   td.innerHTML=stu[key];
                   //单独oper这个列做处理。
                   if(key==="oper") {
                        td.innerHTML = "<input class='delBtn' type='button' value = '删除' /><input class='updateBtn' type='button' value = '修改' />"
                   } 
                }
            }
            //添加行为
            bindDeleteOperator();
            bindUpdateOperator();
        }




        initTable();
        initMyThead();
        initMyTbody();


        function bindDeleteOperator(){
            //找到所有的删除按钮
            let deleteButtons = document.querySelectorAll(".delBtn");
            for(let i = 0;i<deleteButtons.length;i++) {
                //为按钮添加事件
                deleteButtons[i].addEventListener('click',function(){
                    //页面显示端的删除
                    if(confirm('确认删除此行数据吗?')){
                        let tr = this.parentElement.parentElement;
                        let sid = tr.firstElementChild.innerHTML;
                        let index = findIndexofArrayBySid(sid)
                        //index肯定存在
                        students.splice(index,1);
                        tr.remove();
                    }
                })
            }
        }

        function bindUpdateOperator(){
            let updateBtns = document.querySelectorAll(".updateBtn");
            for(let i = 0;i<updateBtns.length;i++) {
                //为按钮添加事件
                updateBtns[i].addEventListener('click',function(){
                    let myForm = document.querySelector("#myForm");
                    myForm.style.display = "block";
                    //将当前行的数据获取到。
                    let currentRow = this.parentElement.parentElement;
                    let sid = currentRow.firstElementChild.innerHTML;
                    let name = currentRow.firstElementChild.nextElementSibling.innerHTML;
                    let age = currentRow.firstElementChild.nextElementSibling.nextElementSibling.innerHTML;
                    let addr = this.parentElement.previousElementSibling.innerHTML;
                    myForm.sid.value = sid;
                    myForm.sid.readOnly = true;
                    myForm.name.value = name;
                    myForm.age.value = age;
                    myForm.addr.value = addr;
                })
            }
        }
       


        function findIndexofArrayBySid(sid) {
            for(let i = 0 ;i<students.length;i++) {
                if(students[i].sid===sid) {
                    return i ; 
                }
            }
            return -1;
        }


        function reflushData(){
            let sid = document.querySelector("#sid").value;
            let name = document.querySelector("#name").value;
            let age = document.querySelector("#age").value;
            let addr = document.querySelector("#addr").value;
            let stu = {
                sid:sid,
                name:name,
                age:age,
                addr:addr,
                "oper":""
            }
            let index  = findIndexofArrayBySid(sid);
            students.splice(index,1,stu);
            myTbody.innerHTML="";
            initMyTbody();
            document.querySelector("#myForm").style.display="none";
        }
       

    </script>


    <form id = "myForm" style="display: none;">
        编号：<input type="text" id= "sid" readonly> <br>
        姓名：<input type="text" id = "name">  <br>
        年龄：<input type="text" id ="age">  <br>
        地址：<input type="text" id = "addr">  <br>
        <input type="button" value = "修改" onclick = "reflushData()">
    </form>
</body>
</html>